iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 4
1
Modern Web

Laravel 6.0 初體驗!怎麼用最新的 laravel 架網站!系列 第 4

[Day 4] Hello World! 開啟我們自己的第一個網頁!

  • 分享至 

  • xImage
  •  

檔案安裝好了,環境也建置好了,再來就是要開始寫程式囉!

作為慣例,我們來寫一個簡單的 Hello World,跟全世界介紹一下我們的網站吧!

設置路徑

首先,我們先想好我們 hello world 的網頁位址是什麼

既然是 hello world,那我們就用 /hello-world 這個路徑好了!

http://127.0.0.1/hello-world

我們來測試這個網址看看會看到什麼。

點進去之後,我們看到了

404 畫面

不意外的,是 404 畫面,畢竟我們什麼都還沒開始寫嘛XD


在 Laravel 裡面,設置路徑的方式是在 routes/ 資料夾裡面

我們打開這個資料夾,看看裡面的檔案結構

Laravel Routes Structure

因為筆者自己喜歡的 IDE 是 PhpStorm,後面的教學畫面也通常會是以 PhpStorm 的畫面為主。

非常建議讀者們如果經濟許可,可以買來在開發中使用,會節省非常多的開發時間!

網頁相關的路徑預設放在 web.php 裡面,打開 web.php,我們可以看到以下內容

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

我們在檔案後面,加上

Route::get('/hello-world');

然後連線,看看畫面有沒有改變

對不太熟悉 PHP 的讀者來說,可能感覺少了什麼步驟的感覺。

沒錯!因為 PHP 是所謂的「直譯式語言」,這種程式語言只要改動程式碼,就可以馬上看到變更後的結果,不需要其他流程!

好的!我們再來看看剛剛的網址:

Laravel 錯誤畫面

欸⋯⋯雖然確實有畫面,但是好像跟我們預期的不太一樣耶!

hello world!

我們雖然宣告了這個路徑,但是我們什麼都沒有做。也難怪 Laravel 跳出提示警告我們什麼都沒做了。

所以,我們現在就來做事情:回傳「Hello world!」字串!

Laravel 的 routes 裡面,是可以接受純文字回傳的!所以我們用匿名函式的方式來回傳字串

Route::get('/hello-world', function () {
    return 'Hello world!';
});

不要懷疑!就是這麼的簡單,我們現在連線到 http://127.0.0.1/hello-world

就可以看到我們的 hello world! 了!

設計畫面

雖然看到文字很棒,但是只有純文字的畫面,怎麼能讓我們滿意呢?

所以!我們要設計畫面了!

首先我們建立 resources/views/hello_world.blade.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello world!!!</title>
    </head>
    <body>
      Hello World!!!
    </body>
</html>

這結構非常簡單,只是單純的 HTML 檔案而已。為了容易區分這裡多加了幾個驚嘆號!

然後,我們把剛剛回傳字串的部分,稍做修改:

Route::get('/hello-world', function () {
    return view('hello_world');
});

現在連線 http://127.0.0.1/hello-world ,看到的就是有三個驚嘆號的 Hello world 了!!!

今天有關路徑,回傳和畫面的教學就到這裡囉!各位明天見!


上一篇
[Day 3] 框架裝好了,那畫面呢?聊環境建置,docker 和 laradock
下一篇
[Day 5] 猝不及防的自動測試教學!怎麼用 Laravel 撰寫自動測試
系列文
Laravel 6.0 初體驗!怎麼用最新的 laravel 架網站!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
1
janshawn
iT邦新手 5 級 ‧ 2019-09-06 07:50:55

大大您好,我完全沒接觸過laravel框架,看完覺得文章寫得很好!
看到最後有一個問題想問~所建立的hello_world.blade.php這隻檔案 後面的blade有代表什麼嗎~
想說為什麼不是return view('hello_world.blade'); 問題有點菜XD~

Blade 是 Laravel 使用的模板引擎,可以使用較簡短、優雅的方式來撰寫 View 的邏輯,.blade.php 為副檔名的檔案將會被 Blade 編譯,支援原生 php 程式碼,詳細說明可以參考官方文檔 Laravel Blade Templates

janshawn iT邦新手 5 級 ‧ 2019-09-09 08:05:44 檢舉

感謝說明!

0
Lucas Yang
iT邦新手 4 級 ‧ 2019-09-06 08:53:35

今天的標題是不是少了 [Day 4]?

ReccaChao iT邦研究生 5 級 ‧ 2019-09-06 09:14:43 檢舉

是!感謝補充

1
Lucas Yang
iT邦新手 4 級 ‧ 2019-09-06 08:58:05

看到錯誤截圖還是舊式的 Whoops,有沒有考慮更新成 Ignition? (畢竟這也是 6.0 的特點之一)

ReccaChao iT邦研究生 5 級 ‧ 2019-09-06 09:14:22 檢舉

根據狀況,之後可能會介紹其他的錯誤呈現方式,敬請期待XD

0
ckp6250
iT邦好手 1 級 ‧ 2019-11-26 17:15:21

排排坐,吃果果。

0
aa4731073
iT邦新手 4 級 ‧ 2022-06-30 10:37:21

請問一下,.html裡面有css和js語法的話,用在.blade.php裡面可以執行嗎?

ReccaChao iT邦研究生 5 級 ‧ 2022-09-03 18:42:17 檢舉

可以的,會在 PHP 產生出所有語法之後,將這些內容傳到瀏覽器時,由瀏覽器進行 render 和運作

我要留言

立即登入留言